<template>
	<view>
		<!-- 创建群组 -->
		<view class="createGroup">
			<!-- 群组名称 -->
			<!-- <view class="create_input">
					<view class="uni-title-type" >
						群名称:
					 </view>
					<input @input="getGroupName" placeholder="" placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;"></input>
			</view> -->
			
			 
			<view class='weui-cell bg_input_color'>
				<view class="weui-cell__hd ">
					群名称:
				</view>
				<view class="weui-cell__bd weui-cell__ft">
						<input @input="getGroupName" placeholder=" " placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;"></input>
					</view>
				</view>
			</view>
				
				
			
			
			
			
			<!-- 进群组费用 -->
			<!-- <view class="money_in_box">
			
					<span>用户入群年费:</span>
					<input type="number" @input="getGroupMoney" placeholder="进群费用" placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;" class='money_box'></input>
					<span>元/人</span>
			
			</view> -->
			
			
			<view class='weui-cell bg_input_color'>
				<view class="weui-cell__hd ">
					用户入群年费:
				</view>
				<view class="weui-cell__bd weui-cell__ft in_group_input">
					<input @input="getGroupMoney" placeholder=" " placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;"></input>
				</view>
				<view class="weui-cell__hd ">
					元/人
				</view>
			</view>
			
			
			
			
			<view class='weui-cellss word-cell'>
				<view class='weui-cell'>
					<view class="weui-cell__bd choose-tips fontsize-16">年费分配：群主获得本群所有成员入群年费的15%，邀请人获得入群费的25%，群主邀请人进入本群获得成员入群费的40%；金额支持后期修改。本群暂可容纳2000人，满员后可申请升级人数。</view>
				</view>
			</view>
		
			
			
			<!-- 群简介 -->
		<!-- 	<view class="create_textarea">
				<view>
					<textarea @input="getGroupDec" placeholder="群简介" placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;"/>
				</view>
			</view> -->
			
			<!-- 获取需要邀请的好友列表 -->
			<!-- <view class="friend_list">
				<view>
					<text class="invite_text">邀请好友</text>
					<checkbox-group class="checkbox-group" @change="invite_friend">
						<label class="checkbox" v-for="(item, index) in friendList" :key="index">
							<checkbox :value="item.name"/>{{ item.name }}
						</label>
					</checkbox-group>
				</view>
			</view> -->
			<!--  -->
			
			
<view class='weui-cells'>
	<view class="weui-cell">
		<view class="weui-cell__bd">
			<view class="weui-cell__bd">
				<view class="weui-uploader">
					<view class="weui-uploader__hd">
						<view class="weui-uploader__title upload-title">
							<image class='weui-cell__hd__img' src='/static/images/info-photo.png'></image>群头像
						</view>
					</view>
					<view class="weui-uploader__bd">
						<view class="weui-uploader__files " id="uploaderFiles">
							<view class="weui-uploader__file dp-flex-xy-center" @tap="previewImageOne" :id="avatarUrl">
								<view style='position: relative;'>
			
			
									
									<image  class='weui-uploader__img radius15' :src="avatarUrl|| defaultAvatar"></image>
			
								</view>
							</view>
						</view>
						<view @tap='updataUserAvatar' class='cut-portrait'>更换图片</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
			
			
			
			
			<view class="create_textarea_type">
				<view class="uni-title-type" >
					<view>请选择群所在区域 : </view>
					
					 
				 
				 </view>
				<view class="uni-textarea uni-common-mt">
					<!-- <textarea :value="pickerText" disabled placeholder="请点击下面的按钮进行选择"></textarea> -->
					
					<view class="weui-cell">
						<view class="weui-cell__bd workers-type-wrap">
				
						<view @tap="getGroupTypeProvince" class="workers-type-quyu dp-flex-xy-center" :class="quyuRes?'workers-type-choose':''">{{quyuRes?quyuRes:'区域筛选'}} </view>
			
						</view>
					</view>
					
				</view>
			</view>
			
			
			
			
			<view class="create_textarea_type">	
				<view class="uni-title-type" >
					<view>请选择群的类型 : </view>
					
					<view style='margin-left:20px;' v-if="money>0"><span>当前费用</span> <span class='group_font_red' style='margin-left:10px;'>{{money}}</span></view>
				 
				 </view>
				<view class="uni-textarea uni-common-mt">
					<!-- <textarea :value="pickerText" disabled placeholder="请点击下面的按钮进行选择"></textarea> -->
					
					<view class="weui-cell">
						<view class="weui-cell__bd workers-type-wrap">
				
						<view @tap="chooseDetailWorkerTap" class="workers-type dp-flex-xy-center" :data-id="item.id" :data-name="item.typename" :data-money="item.money"  v-for="(item,index) in groupNameAll" :class="chooseDetailWorker == item.id?'workers-type-choose':''">{{item.typename}} </view>

						</view>
					</view>
					
					
					
				</view>
			</view>
		
			
			
			<view class="create_btn">
				<button @tap="createGroup">创建</button>
			</view>
			
			
			
			<!-- 	插件的条 -->
				<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
				 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray" ></mpvue-picker>
				<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
				 @onCancel="onCancel" @onConfirm="onConfirm" ></mpvue-city-picker>
				 
				 
				 
		</view>
		
		<!-- <mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker> -->
	</view>
</template>
<script>
	/*引入地区开始*/
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '@/common/city.data.js';
	/*引入地区结束*/
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js';
	export default {
		components: {
		// 	/*地区组件开始*/
			mpvuePicker,
			mpvueCityPicker
		// 	/*地区组件结束*/
		},
		data() {
			return {
				/*区域筛选的文字*/
				quyuRes:'',
				quyuId:0,
				/*群类型的开始*/
				chooseDetailWorker: '', // 类别ID
				chooseDetailWorkerName: '', // 类型的名称
				groupNameAll:[],//所有的群类型
				groupNameAllArea:[
					{
						id	:	1,
						typename:'建材商家',
						money:'100.00'
					}
				],
				/*群类型的结束*/
				/*地区插件的开始*/
				// title : "mpvue-picker 使用示例",
				// pickerSingleArray: [{
				// 		label: '中国',
				// 		value: 1
				// 	},
				// 	{
				// 		label: '俄罗斯',
				// 		value: 2
				// 	},
				// 	{
				// 		label: '美国',
				// 		value: 3
				// 	},
				// 	{
				// 		label: '日本',
				// 		value: 4
				// 	}
				// ],
				// mulLinkageTwoPicker: cityData,
				// cityPickerValueDefault: [0, 0, 1],
				// themeColor: '#007AFF',
				// pickerText: '',
				// mode: '',
				// deepLength: 1,
				// pickerValueDefault: [0],
				// pickerValueArray:[],
				/*地区插件的结束*/
				friendList: [],			// 好友列表
				groupName: "",			// 群名称
				groupDec: "",			// 群简介
				allowJoin: true,		// 是否允许任何人加入
				allowApprove: false,	// 加入需要审批
				noAllowJoin: false,		// 不允许任何人加入
				allowInvite: false,		// 允许群人员邀请
				inviteFriend: [],		// 需要加好友ID
				owner: "",				// = myName
				money:0,
				money_in:0,
				/*地区插件的开始*/
				title : "mpvue-picker 使用示例",
				pickerSingleArray: [
					// {
					// 	label: '中国',
					// 	value: 1
					// },
				],
				pickerSingleArrayWorker:[],
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				/*地区插件的结束*/
				attrList:[] ,//地区样式
				//头像图片
				avatarUrl:'',
			}
		},
		onLoad(options) {
			this.owner = JSON.parse(options.owner).myName;
			/*得到所有的群类型*/
			this.getGroupType();
			/*重新设置缓存所有群*/
			this.groupList();
		},
		onShow() {
			var me = this;
			// 获取当前用户的好友信息
			this.$im.conn.getRoster({
				success: function(roster){
					var member = [];
					for(let i = 0; i < roster.length; i++){
						if(roster[i].subscription == "both"){
							member.push(roster[i]);
						}
					}
					me.friendList = member
				}
			});
		},
		methods: {
			//重新写的单图放大
			previewImageOne: function(e) {
				let imgUrls = new Array(e.currentTarget.id);
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: imgUrls // 需要预览的图片http链接列表
				});
			},
			//更换群头像
			updataUserAvatar: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let token = app.globalData.token;
						let filename = res.tempFilePaths[0];
						let name = 'newAvatarUrl';
						console.log('默认token值' + token);
						console.log('默认filename值' + filename);
						console.log('默认name值' + name);
						var arr=this.main_getGlobal();
						//这里设置type为2
						gyzjModel.prototype.updateAvatarGroups(arr.token,arr.type,filename,name).then(data => {
							data = JSON.parse(data);
							switch (data.code) {
								case 1:
									this.avatarUrl=data.data;
									uni.showToast({
										title: '更换成功',
									})
									break;
								default:
									console.log('default我的message' + data.message);
									uni.showToast({
										title: data.message,
										icon: 'none'
									})
									break;
							}
						});
					}
				})
			},
			/*确认的值*/
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);
				let that=this;
				console.log('e的值',e);
				let label=e.label;
				let type=0;
				let pickerSingleArray=this.pickerSingleArray;
				let pickerSingleArrayWorker=this.pickerSingleArrayWorker;
				for(var i=0;i<pickerSingleArray.length;i++){
					if(pickerSingleArray[i]['label']==label){
						type=1;
						this.quyuRes=label;
						this.quyuId=e.value[0];
					}
				}
				for(var i=0;i<pickerSingleArrayWorker.length;i++){
					if(pickerSingleArrayWorker[i]['label']==label){
						type=2;
						this.tiaojianRes=label;
						this.tiaojianId=e.value[0];
					}
				}
				this.confirm_type=type;
				console.log('quyuId',this.quyuId);
				console.log('tiaojianId',this.tiaojianId);
				// gyzjModel.prototype.getGroupsShai(this.quyuId,this.tiaojianId).then(res=>{
				// 	console.log('筛选的res的值',res);
				// 	that.groupListAll=res.data.data;
				// 	console.log('得到的res的值',res);
				// })
			},
			getGroupTypeProvince:function(){
				let attrList=Array();
				gyzjModel.prototype.getRegionParent().then(res=>{
				   let result=res.data;
				   for (var i = 0; i < result.length; i++) {
					let attr={
						'label':result[i].name,
						'value':result[i].id,
						'type':1
					}
					attrList.push(attr);
				   }
				})
				this.pickerSingleArray=attrList;
				this.pickerValueArray = this.pickerSingleArray
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
				console.log('所有的值',this.pickerValueArray);
				console.log('所有的值',this.mode);
				console.log('所有的值',this.deepLength);
				console.log('所有的值',this.pickerValueDefault);
				console.log('所有的值',this.$refs.mpvuePicker);
			},
			/*重新设置群的开始*/
			groupList:function(){
				this.$im.conn.listRooms({
					success: function(rooms){
						console.log('add_groups的成功获取的rooms',rooms);
						if(uni.setStorage('listGroup')){
							uni.removeStorageSync('listGroup');
						}
						uni.setStorageSync('listGroup',rooms);
						// 新的方式全局设置
						this.$options.globalData.groupList = rooms || [];
					},
					error: function(){
						console.log('error的执行',error);
					}
				});
			},
			/*重新设置群的结束*/
			getGroupType:function(){
				let me=this;
				gyzjModel.prototype.groupsNameAll().then(res=>{
					let result=res.data;
					
					me.groupNameAll=result;
				})
			},
			/*类型选择开始*/
			  // 具体工种类型选择
			  chooseDetailWorkerTap: function (e) {
				  console.log('点击进来',e);
			      let chooseDetailWorker = e.currentTarget.dataset.id;
			      let chooseDetailWorkerName = e.currentTarget.dataset.name;
			      this.chooseDetailWorker=chooseDetailWorker;
			      this.chooseDetailWorkerName=chooseDetailWorkerName;
				  /*得到当前id*/
				  var group_id=e.target.dataset.id;
				  var money=e.target.dataset.money;
				  this.money=money;
			  },
			/*类型选择结束*/
			getGroupName(e){
				this.groupName = e.detail.value
			},
			/*类型选择结束*/
			getGroupMoney(e){
				this.groupMoney = e.detail.value
			},
			
			getGroupDec(e){
				this.groupDec = e.detail.value
			},
			
			// allowJoin(e){
			// 	this.allowJoin = Boolean(e.detail.value) || false
			// },
			
			// allowApprove(e){
			// 	this.allowApprove = Boolean(e.detail.value) || false
			// },
			
			// noAllowJoin(e){
			// 	this.noAllowJoin = Boolean(e.detail.value) || false
			// },
			
			// allowInvite(e){
			// 	this.allowInvite = Boolean(e.detail.value) || false
			// },
			
			invite_friend(e){
				this.inviteFriend = e.detail.value
			},
			
			// 创建群组
			createGroup(){
				let me = this;
				let allGroups = getApp().globalData.groupList;
				
				
				if(!this.groupName.trim()){
					uni.showModal({
						title: "",
						content: "请输入群名",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				if(!this.avatarUrl.trim()){
					uni.showModal({
						title: "",
						content: "请传入群头像",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				if(!this.quyuId){
					uni.showModal({
						title: "",
						content: "请选择群所在区域",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				if(!this.chooseDetailWorker.trim()){
					uni.showModal({
						title: "",
						content: "请输入群类型",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				if(allGroups.reduce(function(result, v, k){
					return result || (v.name == me.groupName);
				}, false)){
					uni.showModal({
						title: "",
						content: "群名被占用",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				// let options = {
				// 	data: {
				// 		groupname: this.groupName,
				// 		desc: this.groupDec,
				// 		members: this.inviteFriend,
				// 		"public": this.allowJoin,
				// 		owner: this.owner
				// 	},
				// 	success: function(respData){
				// 		uni.showToast({
				// 			title: "添加成功",
				// 			duration: 2000,
				// 			success: function(res){
				// 				setTimeout(() => uni.navigateTo({
				// 					url: "../groups/groups?myName=" + me.owner
				// 				}), 2000);
				// 			},
				// 		});
				// 	},
				// 	error: function(err){
				// 		this.$helper.toast('none', err.data.error_description, 2000, false, 'bottom');
				// 		console.log(err);
				// 	},
				// };
				/*重新组装自己的数据*/
				var arr=this.main_getGlobal();
				console.log('arr的值',arr);
				this.main_is_login(arr);
				if(arr.token=='0739'){
					return false;
				}
				let options= {
					groupname: this.groupName,
					desc: this.groupDec,
					public: JSON.stringify(this.allowJoin),
					maxusers:2000,
					owner: this.owner,
					group_id:this.chooseDetailWorker,
				}
				var quyuId=this.quyuId;
				var group_info=JSON.stringify(options);
				var money=this.money;
				var money_in=this.groupMoney;
				var avatarUrl=this.avatarUrl;
				uni.navigateTo({
					url: "./pay_groups_master/pay_groups_master?group_info="+group_info+"&money="+money+"&quyuId="+quyuId+'&money_in='+money_in+'&avatarUrl='+avatarUrl,
				});
				// gyzjModel.prototype.PostCreateGroups(arr.token,arr.type,options).then(res=>{
				// 	console.log('PostCreateGroups创建群成功res的值',res);
				// 	if(res.code==1){
				// 		uni.showToast({
				// 			title: "添加成功",
				// 			duration: 2000,
				// 			success: function(res){
				// 				uni.reLaunch({
				// 					url: "../groups/groups",
				// 				});
				// 			},
				// 		});
				// 	}else{
				// 		console.log('创建群失败!');
				// 		this.$helper.toast('none', err.data.error_description, 2000, false, 'bottom');
				// 	}
				// });
				
				//客户端创建群的操作
				// this.$im.conn.createGroupNew(options);
			},
		}
	}
</script>

<style>

.createGroup{
	background-color: #CFCFCF;
}
.create_input {
	width: 100%;
	height: 40px;
	background-color: #ffffff;
	border-top: 1px solid #CFCFCF;
}
.create_input view {
	width: 100%;
	height: 100%;
	padding: 0 10px 0 10px;
	box-sizing: border-box;
}
.create_input input {
	font-size: 14px;
	width: 100%;
	height: 100%;
	line-height: 100%;
}

.create_textarea {
	width: 100%;
	height: 150px;
	background-color: #ffffff;
	border-top: 1px solid #CFCFCF;
}
.create_textarea view {
	width: 100%;
	height: 100%;
	line-height: 100;
	padding: 0 10px 0 10px;
	box-sizing: border-box;
}
.create_textarea textarea {
	padding-top: 7px;
	font-size: 14px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	line-height: 20px;
}

/*  */
.check_area {
	margin-top: 1px;
}
.check_area .checkbox-group {
	background: #fff;
	width: 100%;
	margin: 0 auto;
	padding: 10px 10px 0 10px;
	box-sizing: border-box;
}
.check_area .checkbox-group:last-child {
	padding: 10px;
}
.check_area .checkbox-group .checkbox {
	display: block;
	font-size: 14px;
	line-height: 30px;
}
.invite_text {
	font-size: 14px;
	padding-left: 12px;
	color: #333;
}

/*  */
.friend_list {
	margin-top: 1px;
	background: #fff;
}
.friend_list .checkbox-group {
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
}
.friend_list .checkbox-group .checkbox {
	display: block;
	font-size: 14px;
	line-height:30px;
	margin-bottom: 8px;
}

.create_btn {
	background-color: #fff;
	margin-bottom:20rpx;
}
.create_btn button {
	margin: 0 auto;
	width: calc(100% - 20px);
	background-color:#007AFC;
	color:#fff;
}


/*新建的样式等等*/
.uni-title-type{
	padding-left:10px;
	margin-top:10px;
	display:flex;
}
.create_textarea_type {
	border-top: 1px solid #CFCFCF;
	background-color:white;
}
.workers-type,.workers-type-quyu{
	width: 31%;
	box-sizing: border-box;
	padding: 20rpx 20rpx;
	color: #666;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 0 1.167%;
	margin-bottom: 20rpx;
	text-align: center;
	font-size: 28rpx;
}
.dp-flex-xy-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.workers-type-wrap {
	display: flex;
	flex-wrap: wrap;
}
.weui-cell__bd {
	flex: 1;
}
.weui-cell{
	padding:10px;
}
.workers-type-choose {
	background-color: #f94c48;
	color: #fff;
	border: 1px solid #f94c48;
}
/*颜色*/
.group_font_red{
	color:red;
}











/********************************图片处理*********************/
/*图片尺寸修改*/
	.weui-uploader__file>view {
		width: 216upx;
		height: 216upx;
	}

	.weui-uploader__img {
		width: 216upx;
		height: 216upx;
		border: 1px solid #d9d9d9;

	}

	.weui-uploader__files .weui-uploader__file {
		margin-right: 13px;
	}

	.weui-uploader__files .weui-uploader__file:nth-child(3n) {
		margin-right: 0;
	}

	.weui-uploader__bd>.weui-uploader__file {
		margin-right: 0px;
	}

	.weui-uploader__file {
		margin-bottom: 13px;
	}

	.choose-tips {
		color: #666;
		font-size: 24upx;
		flex-wrap: wrap;
		line-height: 1.4;
	}

	.weui-cell__hd__img {
		width: 18px;
		height: 18px;
		margin-right: 10px
	}

	.fontsize-14 {
		font-size: 14px;
	}


	.fontsize-16 {
		font-size: 16px;
	}

	.red-color {
		color: #f94c48;
	}

	.weui-cellss {
		position: relative;
		background-color: #fff;
		line-height: 1.41176471;
		font-size: 17px
	}
	/* 红点 */
	.big-size {
		font-size: 22px;
	}
	
	.cur-place {
		width: 350upx;
		height: 40upx;
		color: #f94c48;
		padding: 8upx 0upx;
		border-radius: 5px;
		border: 1px solid #f94c48;
		display: block;
		float: right;
		text-align: center;
	}
	
	.input-map {
		border: 1px solid #f94c48;
		color: #f94c48;
		border-radius: 5px;
		width: 350upx;
		height: 40upx;
		display: block;
		float: right;
		margin-right: 24upx;
		text-align: center;
		padding: 8upx 0upx;
	}
	
	input::input-placeholder {
		color: #f94c48;
	}
	
	.dp-flex-right {
		flex-direction: row-reverse;
	}
	
	.word-cell {
		background-color: #fff;
		margin: 20upx 0;
	}
	
	.mar20 {
		margin-top: 20upx;
	}
	
	.user-textarea {
		height: 130upx;
		line-height: 1.4;
	}
	
	.cut-portrait {
		display: inline;
		padding: 2upx 10upx;
		background-color: #f94c48;
		color: #fff;
		opacity: .5;
		font-size: 28upx;
		position: absolute;
		bottom: 6%;
		left: 13%;
	}
	
	.radius15 {
		border-radius: 15upx;
	}
	.padding56 {
		padding-left: 50upx;
	}
	.weui-cells{
		margin-top:0upx;
	}
	.money_box{
		width:50rpx;
	}
	.money_in_box{
		display:flex;
	}
	.bg_input_color{
		background-color:white;
	}
	.in_group_input{
		display:flex;
	}
	/* .in_group_input input{
		width:80rpx;
	} */
</style>
